<template>
        <div>
            <transition name="firing" appear>
                <div class="firingContainer" @click="pushShow" v-if="isShow">
                    <div class="firing">
                        <div class="logoImg"></div>
                        <span class="firingTitle">多囊之翼</span>
                        <span class="firingSubTitle">女性多囊卵巢综合改善先导</span>
                    </div>
                </div>
            </transition>
            <showGuide v-if="!isShow"/>
        </div>
</template>

<script>
    import showGuide from './showGuide.vue';
    export default {
        name:'firingGuide',
        components:{showGuide},
        data(){
            return{
                isShow:true
            }
        },
        methods:{
            pushShow(){
                this.isShow=false,
                this.$router.push({
                    name:'zero'
                })
            },
        }
    }
</script>

<style scoped>
    .firingContainer{
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .firing{
        width: 4rem;
        height: 3rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .firing .logoImg{
        width: 1.92rem;
        height: 1.92rem;
        background-image: url(../assets/img/tab+logo@2x/logo.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
    .firing .firingTitle{
        font-size: 0.42rem;
        font-family: PingFangSC-Mediuem;
    }
    .firing .firingSubTitle{
        font-size: 0.25rem;
        font-family: PingFangSC-Regular;
    }
    .firing-enter{
        opacity: 0;
    }
    .firing-enter-to{
        opacity: 1;
    }
    .firing-enter-active{
        transition: 3s;
    }
</style>